<template>
  <div class="comm">
    <!-- <router-link class="commodity" v-for="item in commod" :key="item.id" :to="'/home/commshops/'+item.id" tag="div">
      <img :src="item.img_url" alt />
      <h3>{{item.title}}</h3>

      <div>
        <p class="comm-top">
          <span class="commyer">￥{{item.market_price}}</span>
          <span class="commyre">￥{{item.sell_price}}</span>
        </p>
        <p class="comm-bottom">
          <span>1</span>
          <span>还有{{item.stock_quantity}}件</span>
        </p>
      </div>
    </router-link> -->
     <div class="commodity" v-for="item in commod" :key="item.id" @click="gitelc(item.id)">
      <img :src="item.img_url" alt />
      <h3>{{item.title}}</h3>

      <div>
        <p class="comm-top">
          <span class="commyer">￥{{item.market_price}}</span>
          <span class="commyre">￥{{item.sell_price}}</span>
        </p>
        <p class="comm-bottom">
          <span>1</span>
          <span>还有{{item.stock_quantity}}件</span>
        </p>
      </div>
    </div>
    <!-- <mt-button type="danger" size="large" @click="getMores">加载更多</mt-button> -->
    <button type="danger" class="mui-btn mui-btn-block" @click="getMores">加载更多</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      page: 1,
      commod: []
    };
  },
  created() {
    this.getcommodity();
  },
  methods: {
    getcommodity() {
      this.$http
        .get(
          "http://www.liulongbin.top:3005/api/getgoods?pageindex=" + this.page
        )
        .then(res => {
          // console.log(res);

          if (res.body.status === 0) {
            this.commod = this.commod.concat(res.body.message);
          }
        });
    },
    getMores() {
      this.page++;
      this.getcommodity();
    },
    gitelc(id){
      this.$router.push("/home/commshops/"+id)
    }
  }
};
</script>
<style lang="less">
.comm {
  display: flex;
  flex-wrap: wrap;
  .commodity {
    width: 48%;
    margin-left: 1.5%;
    border: 1px solid #ccc;
    box-shadow: 0 0 5px #ccc;
    min-height: 298px;
    img {
      width: 100%;
    }
    h3 {
      font-size: 16px;
    }
    div {
      background-color: #ccc;

      .comm-top {
        padding: 3px;
        .commyer {
          color: red;
          margin-right: 5px;
        }
        .commyre {
          text-decoration: line-through;
        }
      }
      .comm-bottom {
        padding: 3px;
        font-size: 12px;
        margin: 0;
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>
